<template>
  <section>
    <el-form label-width="80px" v-if="gradeList && physicalList" size="mini">
      <el-form-item label="基本:">
        <el-row>
          人员：{{typeList.find(type => type.val === PG.type).label}}
        </el-row>
        <el-row>
          体质：{{physicalList.find(physical => physical.id === PG.id.physicalId).name}}
        </el-row>
        <el-row>
          等级：{{gradeList.find(grade => grade.id === PG.id.gradeId).name}}-{{gradeList.find(grade => grade.id === PG.id.gradeId).description}}
        </el-row>
      </el-form-item>
      <el-form-item label="标题">
        <el-input size="mini" v-model="PG.title"></el-input>
      </el-form-item>
      <el-form-item label="编码">
        <el-input size="mini" v-model="PG.code"></el-input>
      </el-form-item>
      <el-form-item label="注意事项" >
        <TextEditor v-model="PG.attention" :editorToolbar="customToolbar"></TextEditor>
      </el-form-item>
      <el-form-item label="描述">
        <el-input size="mini" v-model="PG.description"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button size="mini" @click="saveBtn(PG)" type="primary">保存</el-button>
      </el-form-item>
    </el-form>
  </section>
</template>

<script>
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import Vue from 'vue'//后续添加属性，需要vue联动
  import errHandler from '@/assets/errHandler'
  import TextEditor from '@/components/TextEditor'
  export default {
    name: "editPG",
    props:['PG'],
    components:{TextEditor},
    data() {
      return {
        customToolbar: [['bold','italic','underline'],[{'list':'ordered'},{'list':'bullet'}],['image','code-block']],
        typeList:[
          {label:'儿童',val:1},
          {label:'成人',val:2},
        ],
        gradeList:null,
        physicalList:null,
      }
    },
    created(){
      console.log(this.PG)
      this.getGradeList(this.PG.type)
      this.getPhysicalList(this.PG.type)
    },
    computed:{
    },
    watch: {
    },
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      getGradeList(type){
        this.fetch({name:"getGradeList",data:{type}})
          .then(res=>{
            console.log(res)
            this.gradeList=res
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      getPhysicalList(type){
        this.fetch({name:"getPhysicalList",data:{type}})
          .then(res=>{
            console.log(res)
            this.physicalList=res
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      saveBtn(PG){
        console.log(PG)
        this.updatePhysicalAndGrade(PG)
      },
      updatePhysicalAndGrade(PG){
        this.fetch({name:"updatePhysicalAndGrade",data:{...PG,...PG.id}})
          .then(res=>{
            console.log(res)
            this.$emit('cancel')
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      }
    }
  }
</script>

<style scoped>

</style>
